<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>

	<body>
		<!--	1、col-列；
				2、xs-maxsmall，超小；sm-small，小；md-medium，中等；
				3、-*表示占列，即占自动每行row分12列栅格系统比；
				4、col-xs-*超小屏幕 手机 (<768px),
				.col-sm-*小屏幕 平板 (≥768px),
				.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数).
				同时写多个表示自适应匹配	
				-->
		<div class="container">
			<div class="row">
				<div class="col-md-6 " style="background-color: #28A4C9;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">这是第一个方块</div>

				<div class="col-md-6 " style="background-color: #28A4C9;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">这是第2个方块</div>

				<div class="col-md-6" style="background-color: #28A4C9;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">这是第3个方块</div>

				<div class="col-md-6" style="background-color: #28A4C9;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">这是第4个方块</div>
			</div>

			<!--栅格偏移-->
			<div class="row">
				<!--col-md-offset-6 指的是据左偏移6个栅格系统-->
				<div class="col-md-6 col-md-offset-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>test</p>
				</div>
			</div>

			<!--栅格嵌套-->
			<div class="row">
				<div class="col-md-6" style="background-color: #28A4C9;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
					<div class="row">
						<div class="col-md-3" style="background-color:#2E6DA4;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">这是嵌套测试,你就是个是十分恐惧哈萨克几分恐惧撒谎考了几分哈克时间很快就发哈可好看睡觉了</div>
						<div class="col-md-3" style="background-color: #2E6DA4;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">这是嵌套测试</div>
					</div>
				</div>
				<div class="col-md-6" style="background-color: #28A4C9;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">这是嵌套测试</div>
			</div>

			<!--列排序-->
			<div class="row">
				<p>
					排序前
				</p>
				<div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					我在左边
				</div>
				<div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					我在右边
				</div>
			</div>
			<br>
			<!--col-md-push-10 ,它的意思就是,在中等尺寸的设备上,把主体这块内容向右推 10 个网格的宽度-->
			<div class="row">
				<p>
					排序后
				</p>
				<div class="col-md-2 col-md-push-10" style="background-color: #28A4C9; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					我在左边
				</div>
				<div class="col-md-10 col-md-pull-2" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					我在右边
				</div>
			</div>

	</body>

</html>